<template>
  <div class="menuConfig-box">
    <div class="left">
      <div class="left-title">
        <a-button
          type="primary"
          style="margin-right:5px;height:30px"
          @click="clearMenu"
        >
          清空
        </a-button>
        <a-button
          type="primary"
          style="margin-right:5px;height:30px"
          @click="setMenu"
        >
          应用
        </a-button>
        已选菜单
      </div>
      <draggable
        v-model="selectedMenus"
        group="parent"
        animation="300"
        dragClass="dragClass"
        ghostClass="ghostClass"
        chosenClass="chosenClass"
        class="parent-box"
        @start="onStart"
        @end="onEnd"
      >
        <transition-group class="parent-span">
          <div
            v-for="selectedMenu in selectedMenus"
            :key="selectedMenu.name"
            class="parent-menu"
          >
            <div style="margin-bottom:10px">{{ selectedMenu.name }}</div>
            <draggable
              group="child"
              v-model="selectedMenu.children"
              animation="300"
              dragClass="dragClass"
              ghostClass="ghostClass"
              chosenClass="chosenClass"
              class="child-box"
              @start="onStart"
              @end="onEnd"
            >
              <transition-group class="child-span">
                <span
                  v-for="item in selectedMenu.children"
                  :key="item.name"
                  class="child-menu"
                >
                  {{ item.name }}
                </span>
              </transition-group>
            </draggable>
          </div>
        </transition-group>
      </draggable>
    </div>

    <div class="right">
      <div class="right-title">
        未选菜单
      </div>
      <draggable
        v-model="unSelectedMenus"
        group="parent"
        animation="300"
        dragClass="dragClass"
        ghostClass="ghostClass"
        chosenClass="chosenClass"
        class="parent-box"
        @start="onStart"
        @end="onEnd"
      >
        <transition-group class="parent-span">
          <div
            v-for="unSelectedMenu in unSelectedMenus"
            :key="unSelectedMenu.name"
            class="parent-menu"
          >
            <div style="margin-bottom:10px">{{ unSelectedMenu.name }}</div>
            <draggable
              group="child"
              v-model="unSelectedMenu.children"
              animation="300"
              dragClass="dragClass"
              ghostClass="ghostClass"
              chosenClass="chosenClass"
              class="child-box"
              @start="onStart"
              @end="onEnd"
            >
              <transition-group class="child-span">
                <span
                  v-for="item in unSelectedMenu.children"
                  :key="item.name"
                  class="child-menu"
                >
                  {{ item.name }}
                </span>
              </transition-group>
            </draggable>
          </div>
        </transition-group>
      </draggable>
    </div>
  </div>
</template>

<script>
import { isEmpty } from "lodash";
import draggable from "vuedraggable";
export default {
  name: "menuConfig",
  components: {
    draggable
  },
  data() {
    return {
      menuDatas: [],
      selectedMenus: [],
      unSelectedMenus: [],
      drag: false
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if (isEmpty(this.$store.state.selectedMenus)) {
        this.selectedMenus = this.$store.state.permission.allMenus;
      } else {
        this.selectedMenus = this.$store.state.selectedMenus;
        this.unSelectedMenus = this.$store.state.unSelectedMenus;
      }
    },
    onStart() {
      this.drag = true;
    },
    onEnd() {
      this.drag = false;
    },
    setMenu() {
      this.$store.commit("setSelectedMenus", this.selectedMenus);
      this.$store.commit("setUnSelectedMenus", this.unSelectedMenus);
      this.$eventBus.$emit("setMenu", this.selectedMenus);
    },
    clearMenu() {
      this.selectedMenus = [];
      this.unSelectedMenus = this.$store.state.permission.allMenus;
    }
  }
};
</script>

<style lang="less" scoped>
.menuConfig-box {
  display: flex;
  height: 100%;
  padding: 10px;
  .left {
    height: 100%;
    width: 50%;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    .left-title {
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      text-align: center;
      color: #758a99;
      margin-bottom: 10px;
    }
    .parent-box {
      height: 100%;
      .parent-span {
        height: 100%;
        width: 100%;
        display: inline-block;
        .parent-menu {
          background: #e3f9fd;
          padding: 10px;
          color: #758a99;
          margin-bottom: 10px;
          .child-box {
            padding: 5px;
            .child-span {
              height: 100%;
              width: 100%;
              display: inline-block;
              .child-menu {
                background: #44cef6;
                display: inline-block;
                margin: 10px;
                padding: 5px;
                color: white;
                // height: 30px;
              }
            }
          }
        }
      }
    }
  }
  .right {
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    .right-title {
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      text-align: center;
      color: #758a99;
      margin-bottom: 10px;
    }
    .parent-box {
      height: 100%;
      .parent-span {
        height: 100%;
        width: 100%;
        display: inline-block;
        .parent-menu {
          background: #e3f9fd;
          padding: 10px;
          color: #758a99;
          margin-bottom: 10px;
          .child-box {
            padding: 5px;
            .child-span {
              height: 100%;
              width: 100%;
              display: inline-block;
              .child-menu {
                background: #44cef6;
                display: inline-block;
                margin: 10px;
                padding: 5px;
                color: white;
                // height: 30px;
              }
            }
          }
        }
      }
    }
  }
}
.ghostClass {
  background-color: #3eede7 !important;
}

.chosenClass {
  background-color: #3eede7 !important;
  opacity: 1 !important;
}

.dragClass {
  background-color: #3eede7 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
</style>
